const btns = document.querySelectorAll(".btn");
const len = btns.length;

// 错误写法
// for (var i = 0; i < len; i++) {
//     btns[i].onclick = function() {
//         console.log(i)
//     }
// }

// 改正
// 方案一：闭包
// 缺点：形成太多无法被释放的闭包，浪费内存
// 1 每次循环形成一个闭包
// for (var i = 0; i < len; i++) {
//   (function (i) {
//     btns[i].onclick = function () {
//       console.log(i);
//     };
//   })(i);
// }
// 2 每次点击形成一个闭包
// for (var i = 0; i < len; i++) {
//   btns[i].onclick = (function (i) {
//     return function () {
//       console.log(i);
//     };
//   })(i);
// }
// 3 let的本质也是闭包
// for (let i = 0; i < len; i++) {
//   btns[i].onclick = function() {
//     console.log(i)
//   }
// }

// 方案二：把i设置为每一个btns[i]对象的自定义属性
// for (var i = 0; i < len; i++) {
//     btns[i].index = i
//     btns[i].onclick = function() {
//         console.log(this.index)
//     }
// }

// 方案三：事件委托 -- 最优
document.addEventListener("click", function (e) {
  const target = e.target,
    targetName = e.target.tagName;
  if (targetName === "BUTTON") {
    const index = target.getAttribute("index");
    console.log(index);
  }
});
